import { Button, DatePicker, Input, NavBar } from 'antd-mobile'
import Icon from '@/components/Icon'
import './index.scss'
import classNames from 'classnames'
import { billListData } from '@/constants'
import { useNavigate } from 'react-router-dom'
import { useState, useMemo } from 'react'
import { useDispatch } from 'react-redux'
import { billStoreActions } from '@/store/modules/billStore'

const New = () => {
  const dispatch = useDispatch()
  const navigate = useNavigate()

  const [curType, setCurType] = useState('pay') // pay, income

  const [billType, setBillType] = useState('')

  const [money, setMoney] = useState(undefined)

  // 保存按钮禁用状态
  const disabledOfSaveBtn = useMemo(() => {
    return !money || !billType
  }, [billType, money])

  const saveBill = () => {

    if (disabledOfSaveBtn) return

    const billObj = {
      type: curType,
      money: curType === 'pay' ? -money : +money,
      date: Date.now(), // new Date(),
      useFor: billType
    }

    const res = dispatch(billStoreActions.addBill(billObj))

    console.log('[ res ] >', res)

    navigate('/')

  }

  return (
    <div className="keepAccounts">
      <NavBar className="nav" onBack={() => navigate(-1)}>
        记一笔
      </NavBar>

      <div className="header">
        <div className="kaType">
          <Button
            shape="rounded"
            className={classNames(curType === 'pay' && 'selected')}
            onClick={() => {
              setCurType('pay')
              setBillType('')
            }}
          >
            支出
          </Button>
          <Button
            className={classNames(curType === 'income' && 'selected')}
            onClick={() => {
              setCurType('income')
              setBillType('')
            }}
            shape="rounded"
          >
            收入
          </Button>
        </div>

        <div className="kaFormWrapper">
          <div className="kaForm">
            <div className="date">
              <Icon type="calendar" className="icon" />
              <span className="text">{'今天'}</span>
              <DatePicker
                className="kaDate"
                title="记账日期"
                max={new Date()}
              />
            </div>
            <div className="kaInput">
              <Input
                className="input"
                placeholder="0.00"
                type="number"
                value={money}
                onChange={(v) => {
                  if (v.startsWith(0) && v.length > 1) {
                    v = v.slice(1)
                  }
                  console.log('[ typeof v ] >', typeof v)
                  setMoney(v)
                }}
              />
              <span className="iconYuan">¥</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kaTypeList">
        {billListData[curType].map(item => {
          return (
            <div className="kaType" key={item.type}>
              <div className="title">{item.name}</div>
              <div className="list">
                {item.list.map(item => {
                  return (
                    <div
                      className={classNames(
                        'item',
                        billType === item.type && 'selected'
                      )}
                      key={item.type}
                      onClick={() => setBillType(item.type)}
                    >
                      <div className="icon">
                        <Icon type={item.type} />
                      </div>
                      <div className="text">{item.name}</div>
                    </div>
                  )
                })}
              </div>
            </div>
          )
        })}
      </div>

      <div className="btns">
        <Button disabled={disabledOfSaveBtn} className="btn save" onClick={saveBill}>
          保 存
        </Button>
      </div>
    </div>
  )
}

export default New